<template>
  <div name="userForm">
  <el-row type="flex"
          class="row-bg"
          justify="center">
    <el-col>
      <el-descriptions
          class="user-descriptions"
          title="用户信息"
          :column="2"
          border>
        <template slot="extra">
          <el-button type="primary"
                     size="small"
                     @click="editUserInfo"
                     style="margin-top: 15px;">
            修改

          </el-button>
        </template>
        <el-descriptions-item
            label-class-name="user-label"
            content-class-name="user-content">
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{userInfo.username}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-eleme"></i>
            用户状态
          </template>
          <el-tag :type="statusStyle">
            {{userInfo.statusName}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-eleme"></i>
            用户性别
          </template>
          <el-tag :type="statusStyle" >{{showGender}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            电话
          </template>
          {{userInfo.telephone}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-email"></i>
            邮箱
          </template>
          {{userInfo.email}}
        </el-descriptions-item>

      </el-descriptions>
    </el-col>
  </el-row>

  <!--弹出框-->
    <el-dialog
        title="修改用户信息"
        :visible.sync="showEditForm"
        @close="clear">
      <el-form v-model="userInfo" style="text-align: left" ref="dataForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="userInfo.username" autocomplete="off" placeholder="不加《》"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" :label-width="formLabelWidth" prop="gender">
          <el-select v-model="userInfo.gender" placeholder="请选择显示性别">
            <el-option label="男性" value="1"></el-option>
            <el-option label="女性" value="2"></el-option>
            <el-option label="保密" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="telephone">
          <el-input v-model="userInfo.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="userInfo.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="id" style="height: 0">
          <el-input type="hidden" v-model="userInfo.id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditForm = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import resetPassword from "../resetPassword/resetPassword";

export default {
  name: "userForm",
  data() {
    return{

      userInfo:{
        userId: 0,
        username: '',
        telephone: '',
        email: '',
        isDoctor: false,
        userStatus: 0,
        statusName: '',
        gender: 0,
        ipLock: '',

      },

      resetPassword:{
        userId: 0,
        password: '',
        currentPassword: ''
      },

      formLabelWidth: '120px',
      showEditForm: false
    }
  },created(){

  },mounted: function(){
    this.getUserInfo();

  },computed:{
    statusStyle: function(){
      let status = "info"
      switch(this.userInfo.userStatus){
        case 1: //出诊
          status = "";
          break;
        case 4: //在线
          status = "success";
          break;
        case 6: case 8: //封禁 删除
          status = "danger"
          break;
        case 7:
          status = "warning"
          break;
        default:
          break;
      }
      return status;
    },
    showGender: function(){
      let gender = '';
      switch(this.userInfo.gender){

        case 1: //mela
          gender = '男'
          break;
        case 2:
          gender = '女'
          break;
        default:
          gender = '保密'
          break;
      }
      return gender;
    }

  },
  methods: {
    getUserInfo(){
      const self = this;

      this.$axios.get('api/user/accessUser')
          .then(res =>{
            self.userInfo = res.data.data;
            self.resetPassword.userId = self.userInfo.userId;
            self.userInfo.email = self.userInfo.email
                ? self.userInfo.email
                : '未设置';
          }).catch(err => {
        console.log(err);
      })
    },
    clear () {

    },
    editUserInfo(){
      const self = this;
      self.showEditForm=true;
    },
    onSubmit(){
      const self = this;
      this.$axios.post('api/user/editUserInfo',self.userInfo)
    }
  }
}
</script>

<style scoped>
.user-label{
  width: 50px;

}

.el-row{
  height: 100%;
  display: flex;
}
.row-bg{
  height: 100%;
  /*background: #99a9bf;*/
}

.user-content{
  width: 50px;
}
.user-descriptions{
  width: 450px;
  height: 100%;
  background: #cbd0d0;
}
</style>